/**
 * Created by shaotingzhou on 2017/5/10.
 */
// 使用情况情况的中部
//  http://mobile.ximalaya.com/mobile/others/ca/album/track/242825/true/1/20
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    ActivityIndicator
} from 'react-native';
import Video from 'react-native-video'
import Navigator from '../../Main/navigator' //导航栏
import Item from './songItem'  //listView的row
let dataAry = []
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});

export default class Songs extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            songsAry:[],
            dataSource: ds.cloneWithRows(dataAry),
            url:'http://audio.xmcdn.com/group26/M00/18/86/wKgJWFjiaJDzzhjlACKWDfepZZo050.mp3',
            paused:true,
            onclickItem:0
        };
      }

    render() {
        const ary = this.state.songsAry

        if(ary.length > 0) {
            return (
                <View>
                    {/*导航栏*/}
                    <Navigator
                        centerText='华语歌曲'
                        leftSource={require('../../image/返回.png')}
                        leftAction={() => this.leftAction()}
                        rightAction={() => this.rightAction()}
                    />

                    {/*播放器*/}
                    <Video
                        source={{uri: this.state.url}}
                        ref='video'
                        volume={1.0}
                        paused={this.state.paused}
                        playInBackground={true}
                    />

                    <ListView
                        dataSource={this.state.dataSource}
                        renderRow={this.renderRow}
                        enableEmptySections={true}  //去除警告
                    />

                </View>
            );
        }else{
            return(
                <ActivityIndicator
                    animating={true}
                    style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}
                    size="large" />
            )
        }

    }

    leftAction =()=>{
       this.props.navigator.pop({})
    }

    rightAction =()=>{

    }

    renderRow =(rowData,sectionID,rowID,highlightRow) =>{
         return(
             <Item rowData = {rowData}  mynavigator = {this.props.navigator} playSong = {() => this.playSong(rowData,rowID)} />
         )
    }


    componentDidMount(){
        let url = 'http://mobile.ximalaya.com/mobile/others/ca/album/track/242825/true/1/20'
        fetch(url)
            .then((response) => response.json())
            .then((json) => {
                dataAry = json.tracks.list
                this.setState({
                    songsAry:dataAry,
                    dataSource: ds.cloneWithRows(dataAry)
                })
            })
    }

    playSong = (rowData,rowID) =>{
        for(var i = 0;i< dataAry.length;i++){
            dataAry[i].isPaid = false
             dataAry[rowID].isPaid = true
        }


        this.setState({
            url:rowData.playUrl64,
            paused:false,
            dataSource: ds.cloneWithRows(dataAry),
            onclickItem:rowID
        })
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});